<template>
     <CardBox title="文章分类" icon="default/information/List.png" :refresh="this.refresh">
      <div slot="body">
         <button v-for="item in ArticleTypeData" :key="item.id" class="TypeOne flex" @click="searchType(item)">
               <font-awesome-icon :icon="item.icon" class="icon FontWeight"/>
               <div class="name FontWeight">{{item.name}}</div>
               <i class="el-icon-arrow-right FontWeight"></i>
         </button>
      </div>
   </CardBox>
</template>
<script>
import CardBox from '@/components/Package/CardBox/CardBox.vue'
import {mapActions,mapState} from 'vuex'
  export default 
  {
  components: { CardBox },
     name :'', 
     methods:{
        ...mapActions('Init',['getArticleTypeData']),
        //刷新数据
       async refresh(){
         return await this.getArticleTypeData()
        },
        searchType(type){ 
            this.$router.push('/square')
           let timer =  setTimeout(() => {
                this.$bus.$emit('searchType',type )
                clearTimeout(timer)
            }, 100);
        }
     },
     computed:{
        ...mapState('Init',['ArticleTypeData'])
     },
  }
</script>
<style scoped lang='less'>
.FontWeight{
    font-size: 18px;
    color: var(--fontColor);
}

.TypeOne{
    width: 100%;
    justify-content: flex-start;
    height: 40px;
     color: var(--fontColor);

    position: relative;
    border-radius: 7px;

    padding: 10px;
    box-sizing: border-box;

    margin-top: 5px;

    .name{
        width: 70%;
        margin-left: 5px;
        text-align: left;
    }

   
    i{
        position: absolute;
        right: 10px;
    }
}
.TypeOne:hover{
    .FontWeight{
        color: var(--GeneralBackColor);
    }
}
</style>